<template>
  <a-card title="糖尿病教育" :bordered="false" class="card-area">
    <a-spin :spinning="loading">
      <a-form-model
        :model="model"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        labelAlign="left"
      >
        <a-form-model-item label="是否接受过糖尿病教育" :style="{ marginBottom: '5px' }">
          <a-radio-group v-model="model.isReceived">
            <a-radio :value="1"> 是 </a-radio>
            <a-radio :value="2"> 否 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <template v-if="model.isReceived == 1">
          <a-form-model-item v-bind="tailFormItemLayout" :style="{ marginBottom: '5px' }">
            <j-multi-select-tag v-model="model.received" dictCode="pubDossierDiabetesKnowledge" type="checkbox">
            </j-multi-select-tag>
          </a-form-model-item>
          <a-form-model-item v-bind="tailFormItemLayout">
            <a-textarea
              :maxLength="200"
              v-model="model.receivedOther"
              placeholder="如接受过其它相关知识，在此输入"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-model-item>
        </template>

        <a-form-model-item label="希望了解哪方面有关糖尿病的知识" :style="{ marginBottom: '5px' }">
          <j-multi-select-tag v-model="model.hope" dictCode="pubDossierDiabetesKnowledge" type="checkbox">
          </j-multi-select-tag>
        </a-form-model-item>
        <a-form-model-item v-if="model.hope && model.hope.indexOf('9') > -1" v-bind="tailFormItemLayout">
          <a-textarea
            :maxLength="200"
            v-model="model.hopeOther"
            placeholder="如有其它想了解的知识，在此输入"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 12, offset: 10 }">
          <a-button type="primary" @click="save" :loading="saveLoading">保存</a-button>
          <a-popconfirm placement="topLeft" ok-text="是" cancel-text="否" @confirm="doConfirm">
            <template slot="title">
              <p>此操作代表你已完成了页面的填写，是否继续？</p>
            </template>
            <a-button type="primary" style="margin-left: 30px" :loading="saveLoading">确认完成</a-button>
          </a-popconfirm>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-card>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: 'Overview',
  data() {
    return {
      loading: true,
      model: {},
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 4
          }
        }
      },
      sugarLabel: 6,
      saveLoading: false
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      getAction('/102/15/1021502', {
        patientId: patientId
      })
        .then(res => {
          if (res.success) {
            this.model = res.result
          } else {
            postAction('/102/15/1021501', {
              patientId: patientId
            }).then(newRes => {
              if (newRes.success) {
                this.getInfo()
              } else {
                this.$message.error('患者档案创建失败')
              }
            })
          }
        })
        .finally(_ => {
          this.loading = false
        })
    },
    save() {
      this.saveLoading = true
      let queryData = JSON.parse(JSON.stringify(this.model))
      postAction('/102/15/1021501', queryData)
        .then(res => {
          if (res.success) {
            this.$message.success('操作成功')
          } else {
            this.$message.error('操作失败')
          }
        })
        .finally(_ => {
          this.saveLoading = false
        })
    },
    doConfirm() {
      this.saveLoading = true
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let params = {
        patientId: patientId,
        isFinished: 1,
        type: 1
      }
      postAction('/102/10/1021503', params)
        .then(res => {
          if (res.success) {
            this.$message.success('页面已确认', 5)
          }
        })
        .finally(_ => {
          this.saveLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped></style>

